<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  
    <meta name="description" content="我在这里，一个死宅的个人自留地，一个基于hexo的个人博客。随便写写，分享生活，文笔不好，欢迎吐槽！">
  

  
    <meta name="keywords" content="我在这里 个人博客 自留地 死宅 hexo flex-block">
  

  
    <meta name="author" content="后来@">
  

  

  

  <title>浅谈 JavaScript 闭包 | 后来@&#39;s Blog</title>

  

  
    <link rel="icon" href="/favicon.ico">
  

  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
    <link href="https://cdn.bootcss.com/highlight.js/9.15.6/styles/monokai.min.css" rel="stylesheet">
  

  
<link rel="stylesheet" href="/css/style.css">

<meta name="generator" content="Hexo 4.2.0"></head>
<body>
  <div class="root-container">
    <!-- navbar -->
<nav class="navbar">
  <div class="navbar-content">
    <!-- logo -->
    <div class="navbar-logo">
      <a href="/">
        
          后来@&#39;s Blog
        
      </a>
    </div>
    <!-- link -->
    <div class="navbar-link">
      <div class="navbar-btn">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <ul class="navbar-list">
        
          <li class="navbar-list-item"><a href="/">首页</a></li>
        
          <li class="navbar-list-item"><a href="/tags">标签</a></li>
        
          <li class="navbar-list-item"><a href="/links">友链</a></li>
        
          <li class="navbar-list-item"><a href="/messages">留言</a></li>
        
          <li class="navbar-list-item"><a href="/about">关于</a></li>
        
          <li class="navbar-list-item"><a href="/anime">アニメ</a></li>
        
      </ul>
    </div>
  </div>
</nav>

    
<!-- header container -->
<header class="header-container post">

  
  

  
  

  
  

  
  

  
  
    <div class="header-content">
      <div class="post-image" style="background-image: url(https://qiniu.miiiku.xyz/src/images/banner.jpg)"></div>
      <div class="post-text">
        <div class="type-wrap">
          <a class="article-category-link" href="/categories/%E7%AC%94%E8%AE%B0/">笔记</a>
        </div>
        <h1 class="title-wrap">浅谈 JavaScript 闭包</h1>
        <h2 class="title-sub-wrap">
          <strong>后来@</strong>
          <span>发布于</span>
          
  <a href="javascript:;" class="article-date">
    <time datetime="2018-02-09T02:23:19.000Z" itemprop="datePublished">2018-02-09</time>
  </a>

        </h2>
      </div>
    </div>
  

  
  

  </header>

    <!-- 文章 -->

<!-- 文章内容 -->

<div class="body-container">
  <article class="content-container article-container">
    <div class="article-content">
      
      

      <div class="article-entry">
        <p>闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。</p>
<h2 id="闭包的特性"><a href="#闭包的特性" class="headerlink" title="闭包的特性"></a>闭包的特性</h2><p>1.函数嵌套函数</p>
<p>2.函数内部可以引用外部的参数和变量</p>
<p>3.参数和变量不会被垃圾回收机制回收</p>
<h2 id="闭包的定义及其优缺点"><a href="#闭包的定义及其优缺点" class="headerlink" title="闭包的定义及其优缺点"></a>闭包的定义及其优缺点</h2><p>闭包 是指有权访问另一个函数作用域中的变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量</p>
<p>闭包的缺点就是常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。</p>
<p>闭包是javascript语言的一大特点，主要应用闭包场合主要是为了：设计私有的方法和变量。</p>
<p>一般函数执行完毕后，局部活动对象就被销毁，内存中仅仅保存全局作用域。但闭包的情况不同！</p>
<h2 id="嵌套函数的闭包"><a href="#嵌套函数的闭包" class="headerlink" title="嵌套函数的闭包"></a>嵌套函数的闭包</h2><figure class="highlight kotlin"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs kotlin"><br>function aaa() &#123;  <br><br>    <span class="hljs-keyword">var</span> a = <span class="hljs-number">1</span><br>    <span class="hljs-keyword">return</span> function() &#123;<br><br>        alert(a++)<br><br>    &#125;<br><br>&#125; <br><br><span class="hljs-keyword">var</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> = <span class="hljs-title">aaa</span><span class="hljs-params">()</span></span>;  <br><br><span class="hljs-function"><span class="hljs-title">fun</span><span class="hljs-params">()</span></span>;<span class="hljs-comment">// 1 执行后 a++，，然后a还在~  </span><br><br><span class="hljs-function"><span class="hljs-title">fun</span><span class="hljs-params">()</span></span>;<span class="hljs-comment">// 2  </span><br><br><span class="hljs-function"><span class="hljs-keyword">fun</span> = <span class="hljs-literal">null</span>;//a被回收！！</span><br></code></pre></td></tr></table></figure>
<p>闭包会使变量始终保存在内存中，如果不当使用会增大内存消耗。</p>
<h2 id="javascript的垃圾回收原理"><a href="#javascript的垃圾回收原理" class="headerlink" title="javascript的垃圾回收原理"></a>javascript的垃圾回收原理</h2><p>1.在javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收。</p>
<p>2.如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。</p>
<h2 id="使用闭包的好处"><a href="#使用闭包的好处" class="headerlink" title="使用闭包的好处"></a>使用闭包的好处</h2><p>1.希望一个变量长期驻扎在内存中</p>
<p>2.避免全局变量的污染</p>
<p>3.私有成员的存在</p>
<h2 id="1-全局变量的累加"><a href="#1-全局变量的累加" class="headerlink" title="1.全局变量的累加"></a>1.全局变量的累加</h2><figure class="highlight delphi"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs delphi"><br><span class="hljs-keyword">var</span> a = <span class="hljs-number">1</span>;<br><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">abc</span><span class="hljs-params">()</span><span class="hljs-comment">&#123;<br><br>    a++;<br><br>    alert(a);<br><br>&#125;</span><br><br><span class="hljs-title">abc</span><span class="hljs-params">()</span>;</span> <span class="hljs-comment">//2</span><br><br>abc(); <span class="hljs-comment">//3</span><br></code></pre></td></tr></table></figure>
<h2 id="2-局部变量"><a href="#2-局部变量" class="headerlink" title="2.局部变量"></a>2.局部变量</h2><figure class="highlight delphi"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs delphi"><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">abc</span><span class="hljs-params">()</span><span class="hljs-comment">&#123;<br><br>    var a = 1;<br><br>    a++;<br><br>    alert(a);<br><br>&#125;</span><br><br><span class="hljs-title">abc</span><span class="hljs-params">()</span>;</span> <span class="hljs-comment">//2</span><br><br>abc(); <span class="hljs-comment">//2</span><br></code></pre></td></tr></table></figure>
<h2 id="3-局部变量的累加"><a href="#3-局部变量的累加" class="headerlink" title="3.局部变量的累加"></a>3.局部变量的累加</h2><figure class="highlight actionscript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs actionscript"><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">outer</span><span class="hljs-params">()</span></span>&#123;<br><br>    <span class="hljs-keyword">var</span> x=<span class="hljs-number">10</span>;<br><br>    <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>&#123; <span class="hljs-comment">//函数嵌套函数</span><br><br>        x++;<br><br>        alert(x);<br><br>    &#125;<br><br>&#125;<br><br><span class="hljs-keyword">var</span> y = outer(); <span class="hljs-comment">//外部函数赋给变量y;</span><br><br>y(); <span class="hljs-comment">//y函数调用一次，结果为11，相当于outer()()；</span><br><br>y(); <span class="hljs-comment">//y函数调用第二次，结果为12，实现了累加</span><br></code></pre></td></tr></table></figure>
<h2 id="4-模块化代码，减少全局变量的污染"><a href="#4-模块化代码，减少全局变量的污染" class="headerlink" title="4.模块化代码，减少全局变量的污染"></a>4.模块化代码，减少全局变量的污染</h2><figure class="highlight actionscript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs actionscript"><br><span class="hljs-keyword">var</span> abc = (<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>&#123; <span class="hljs-comment">//abc为外部匿名函数的返回值</span><br><br>    <span class="hljs-keyword">var</span> a = <span class="hljs-number">1</span>;<br><br>    <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>&#123;<br><br>        a++;<br><br>        alert(a);<br><br>    &#125;<br><br>&#125;)();<br><br>abc();    <span class="hljs-comment">//2 ；调用一次abc函数，其实是调用里面内部函数的返回值    </span><br><br>abc();    <span class="hljs-comment">//3</span><br></code></pre></td></tr></table></figure>
<h2 id="5-私有变量的存在"><a href="#5-私有变量的存在" class="headerlink" title="5.私有变量的存在"></a>5.私有变量的存在</h2><figure class="highlight actionscript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><code class="hljs actionscript"><br><span class="hljs-keyword">var</span> aaa = (<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>&#123;<br><br>    <span class="hljs-keyword">var</span> a = <span class="hljs-number">1</span>;<br><br>    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">bbb</span><span class="hljs-params">()</span></span>&#123;<br><br>        a++;<br><br>        alert(a);<br><br>    &#125;<br><br>    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">ccc</span><span class="hljs-params">()</span></span>&#123;<br><br>        a--;<br><br>        alert(a);<br><br>    &#125;<br><br>    <span class="hljs-keyword">return</span> &#123;<br><br>        b:bbb, <br><br>        c:ccc<br><br>    &#125;<br><br>&#125;)();<br><br>aaa.b();     <span class="hljs-comment">//2</span><br><br>aaa.c()      <span class="hljs-comment">//1</span><br></code></pre></td></tr></table></figure>
<h2 id="6-使用匿名函数实现累加"><a href="#6-使用匿名函数实现累加" class="headerlink" title="6.使用匿名函数实现累加"></a>6.使用匿名函数实现累加</h2><figure class="highlight actionscript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs actionscript"><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">box</span><span class="hljs-params">()</span></span>&#123;<br><br>    <span class="hljs-keyword">var</span> age = <span class="hljs-number">100</span>;<br><br>    <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>&#123;          <span class="hljs-comment">//匿名函数</span><br><br>        age++;<br><br>        <span class="hljs-keyword">return</span> age;<br><br>    &#125;<br><br>&#125;<br><br><span class="hljs-keyword">var</span> b = box();<br><br>alert(b()); <span class="hljs-comment">//即alert(box()())；</span><br><br>alert(b); <br><br>b = <span class="hljs-literal">null</span>; <span class="hljs-comment">//解除引用，等待垃圾回收</span><br></code></pre></td></tr></table></figure>
<h2 id="7-在循环中添加点击事件"><a href="#7-在循环中添加点击事件" class="headerlink" title="7.在循环中添加点击事件"></a>7.在循环中添加点击事件</h2><figure class="highlight matlab"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs matlab"><br>window.onload = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>&#123;</span><br><br>    var aLi = document.getElementsByTagName(<span class="hljs-string">'li'</span>);<br><br>    <span class="hljs-keyword">for</span> (var <span class="hljs-built_in">i</span>=<span class="hljs-number">0</span>;<span class="hljs-built_in">i</span>&lt;aLi.<span class="hljs-built_in">length</span>;<span class="hljs-built_in">i</span>++)&#123;<br><br>        aLi[<span class="hljs-built_in">i</span>].onclick = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>&#123; //当点击时<span class="hljs-title">for</span>循环已经结束</span><br><br>            alert(<span class="hljs-built_in">i</span>);<br><br>        &#125;<br><br>    &#125;<br><br>&#125;<br></code></pre></td></tr></table></figure>
<h2 id="8-使用闭包改写上面代码"><a href="#8-使用闭包改写上面代码" class="headerlink" title="8.使用闭包改写上面代码"></a>8.使用闭包改写上面代码</h2><figure class="highlight matlab"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs matlab"><br>window.onload = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>&#123;</span><br><br>    var aLi = document.getElementsByTagName(<span class="hljs-string">'li'</span>);<br><br>    <span class="hljs-keyword">for</span> (var <span class="hljs-built_in">i</span>=<span class="hljs-number">0</span>;<span class="hljs-built_in">i</span>&lt;aLi.<span class="hljs-built_in">length</span>;<span class="hljs-built_in">i</span>++)&#123;<br><br>        (<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(i)</span>&#123;</span><br><br>            aLi[<span class="hljs-built_in">i</span>].onclick = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>&#123;</span><br><br>                alert(<span class="hljs-built_in">i</span>);<br><br>            &#125;<br><br>        &#125;)(<span class="hljs-built_in">i</span>)<br><br>    &#125;<br><br>&#125;<br></code></pre></td></tr></table></figure>
<h2 id="9-内存泄露问题"><a href="#9-内存泄露问题" class="headerlink" title="9.内存泄露问题"></a>9.内存泄露问题</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">closure</span>(<span class="hljs-params"></span>)</span>&#123;<br><br>    <span class="hljs-keyword">var</span> oDiv = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'oDiv'</span>);<span class="hljs-comment">//oDiv用完之后一直驻留在内存中</span><br><br>    oDiv.onclick = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;<br><br>        alert(<span class="hljs-string">'oDiv.innerHTML'</span>);<span class="hljs-comment">//这里用oDiv导致内存泄露</span><br><br>    &#125;<br><br>&#125;<br><br>closure();<br><br><span class="hljs-comment">//最后应将oDiv解除引用来避免内存泄露</span><br><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">closure</span>(<span class="hljs-params"></span>)</span>&#123;<br><br>    <span class="hljs-keyword">var</span> oDiv = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'oDiv'</span>);<br><br>    <span class="hljs-keyword">var</span> test = oDiv.innerHTML;<br><br>    oDiv.onclick = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;<br><br>        alert(test);<br><br>    &#125;<br><br>    oDiv = <span class="hljs-literal">null</span>;<br><br>&#125;<br></code></pre></td></tr></table></figure>

      </div>

      <div class="article-footer">
        <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/js/" rel="tag">#js</a></li></ul>
      </div>

      <div class="article-navs">
        
<nav class="card-container card-article-nav">
  <div class="card-wrap">
    
      <div id="article-nav-newer" class="card-item img">
        <article>
          
            <div class="card-cover" style="background-image: url(https://qiniu.miiiku.xyz/20180311_054103520_iOS.jpg)"></div>
          
          <a class="card-link article-nav-link" href="/2018/03/140944.html"></a>
          <strong class="article-nav-caption">Newer</strong>
          <p class="article-nav-title">
            
              『印象 - 春』
            
          </p>
        </article>
      </div>
    
    
      <div id="article-nav-older" class="card-item">
        <article>
          
          <a class="card-link article-nav-link" href="/2017/09/191647.html"></a>
          <strong class="article-nav-caption">Older</strong>
          <p class="article-nav-title">
            
              博客启用HTTPS连接
            
          </p>
        </article>
      </div>
    
  </div>
</nav>

      </div>
      
      

  
  <div class="valine-container">
    <div id="valine_thread" class="valine-thread"></div>
  </div>

  
  
  <div class="disqus-container">
    <p id="disqus_error" class="disqus-error" style="display: none;">如果你看不到评论，那么就真的看不到评论 w(゜Д゜)w</p>
    <div id="disqus_thread" class="disqus-thread"></div>
  </div>
  


    </div>
  </article>
</div>

    <!-- footer container -->
<footer id="footer" class="footer">
  <div class="footer-container">
    <p>&copy; 2020 <a href="/" target="_blank">后来@</a></p>

    <style>
      .colour-text {
        display: inline-block;
        margin: 20px auto;
        text-align: left;
        background-image: linear-gradient(to right, deeppink, pink, hotpink, lightpink, deeppink);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
      }
    </style>
    
    <p class="colour-text">
      “关于泉前辈，我可以和他约会吗？” “不可以”
    </p>

    

    
      <p><a href="http://www.miitbeian.gov.cn" target="_blank">蜀ICP备15014309号</a></p>
    

    <p>Powered by <a href="https://hexo.io" target="_blank">Hexo</a> Theme - <a href="https://github.com/miiiku/flex-block" target="_blank">flex-block</a></p>
  </div>
</footer>
  </div>

  
  

  <!-- disqus 评论 start -->
  <script type="text/javascript">
    /*
     *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
     *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
     */
    
    /*
      var disqus_config = function () {
        this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
      };
    */

    (function() {
      var d = document, s = d.createElement('script'), c = d.querySelector(".disqus-container");
      if (!c) return;
      s.src = 'https://sukoshi95.disqus.com/embed.js';
      s.setAttribute('data-timestamp', +new Date());
      s.onerror = () => {
        let t = document.querySelector("#disqus_error");
        t.style.display = "block";
      }
      (d.head || d.body).appendChild(s);
    })();
  </script>
  <!-- disqus 评论 end -->
  

  <!-- aplayer 音频 start -->
  
<link rel="stylesheet" href="/lib/APlayer.min.css">

  
<script src="/lib/APlayer.min.js"></script>

  <script type="text/javascript">
    const aplayer = document.querySelectorAll(".aplayer");
    aplayer && initaplayer(aplayer);
    function initaplayer(els) {
      let elsArr = Array.from(els);
      elsArr.forEach(el => {
        new APlayer({
          container: el,
          audio: { ...el.dataset },
          theme: "#b7daff",
          lrcType: 3,
          autoplay: false,
          loop: false,
          mutex: true,
        });
      });
    }
  </script>
  <!-- aplayer 音频 end -->
  

<!-- dplayer 视频 start -->

<link rel="stylesheet" href="/lib/DPlayer.min.css">


<script src="/lib/DPlayer.min.js"></script>

<script type="text/javascript">
  const dplayer = document.querySelectorAll(".dplayer");
  dplayer && initDPlayer(dplayer);
  function initDPlayer(els) {
    let elsArr = Array.from(els);
    elsArr.forEach(el => {
      let url = el.dataset.url;
      let cover = el.dataset.cover;
      new DPlayer({
        container: el,
        video: { url: url, pic: cover },
        theme: "#b7daff",
        autoplay: false,
        loop: false,
        mutex: true,
      });
    });
  }
</script>
<!-- dplayer 视频 end -->


<!-- waterfall 瀑布流 start -->

<script src="/lib/waterfall.min.js"></script>

<script type="text/javascript">

const waterfalls = document.querySelectorAll(".waterfall-container");

if (waterfalls && waterfalls.length > 0) {
  waterfalls.forEach((waterfall, index) => {
    let cls = "waterfall-container-" + index;
    waterfall.classList.add(cls);
    initWaterfall(cls, waterfall);
  });
}

function initWaterfall(selector, el) {
  const options = {};
  if (Object.keys(el.dataset).length > 0) {
    for (let k in el.dataset) {
      options[k] = el.dataset[k];
    }
  }
  waterfall(`.${selector}`, options);
}
</script>
<!-- waterfall 瀑布流 end -->


  <!-- zoom start -->
  
<script src="/lib/zoom.min.js"></script>

  <script type="text/javascript">
    document.querySelector(".article-content") && zoom(".article-content");
  </script>
  <!-- zoom end -->
  



  


  


  <!-- Baidu Analytics START -->
  <script>
    var _hmt = _hmt || [];
    (function () {
      if (window.location.hostname === "localhost" || window.location.hostname.startsWith("192.168")) {
        return console.log("本地调试");
      }
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?410f4beade12e8df64ea4c5622313220";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>
  <!-- Baidu Analytics End -->

  


  <!-- Tencent Analytics START -->
  <script>
    (function() {
      if (window.location.hostname === "localhost" || window.location.hostname.startsWith("192.168")) {
        return console.log("本地调试");
      }
      let s = document.querySelector("script");
      let hm = document.createElement("script");
      hm.charset = "UTF-8";
      hm.src = "https://tajs.qq.com/stats?sId=64852535";
      s.parentNode.insertBefore(hm, s);
    })();
  </script>
  <!-- Tencent Analytics End -->



<script src="/js/script.js"></script>

  
  <!-- 尾部用户自定义相关内容 -->

<!-- 插入Sentry -->
<script>
  (function () {
    if (window.location.hostname === "localhost" || window.location.hostname.startsWith("192.168")) {
      return console.log("本地调试");
    }
    let hm = document.createElement("script");
    let s = document.querySelector("script");
    hm.src = "https://browser.sentry-cdn.com/5.10.2/bundle.min.js";
    hm.integrity = "sha384-ssBfXiBvlVC7bdA/VX03S88B5MwXQWdnpJRbUYFPgswlOBwETwTp6F3SMUNpo9M9";
    hm.crossOrigin = "anonymous";
    hm.onload = function () {
      Sentry.init({ dsn: "https://d4e3bac81c30416fb7b917004fdc2a6f@sentry.io/1864685" });
    }
    s.parentNode.insertBefore(hm, s);
  })();
</script>
<!-- 插入Sentry End -->

<!-- 插入百度ESO相关 START -->
<script>
  var _hmt = _hmt || [];
  (function () {
    if (window.location.hostname === "localhost" || window.location.hostname.startsWith("192.168")) {
      return console.log("本地调试");
    }
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?410f4beade12e8df64ea4c5622313220";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  });
</script>
<!-- 插入百度ESO相关 END -->

<!-- 插入百度链接自动提交 START -->
<script>
  (function () {
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
      bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
      bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
  })();
</script>
<!-- 插入百度链接自动提交 END --> 
</body>
</html>